<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
    <!-- vue2绑定事件@click="showTel" -->
  </div>
</template>

<script lang="ts">
export default {
  name: "Person",
  setup() {
    // console.log(this);  //set中的this是undefined,Vue3在弱化this了
    //数据
    let name = "弗利萨";
    let age = 18;
    let tel = "10086";

    //方法
    function changeName() {
      name = "弗利萨大王";
      console.log(name); //name确实改了，但name不是响应式的
    }
    function changeAge() {
      age += 1;
      console.log(age); //age确实改了，但age不是响应式的
    }
    function showTel() {
      alert(tel);
      console.log(tel); //tel确实改了，但tel不是响应式的
    }
    //将数据，方法交出去模板才可以使用
    return { name, age, changeName, changeAge, showTel };

    //setup的返回值也可以是一个渲染函数
    // return () => "777";
  },
};
</script>

<style scoped>
.person {
  background-color: aqua;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin-left: 5px;
  margin-right: 5px;
}
</style>
